<template>
<div class="main">
  <div class="body">
      <div class="body-left">
        <AwardCard :awardId="awardId"></AwardCard>
      </div>
      <div class="body-center">
        <div class="button" v-if="ifAbled">
          <el-button  type="primary" @click="handleAward">申请该奖项</el-button>
        </div>
        <el-divider content-position="right">
          <div class="text">
            我的状态
          </div>
        </el-divider>
        <el-timeline>
          <el-timeline-item
              v-for="(activity, index) in awardStatus"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :hollow="activity.hollow"
              :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
          <div class="text">
            结果：{{studentAward.result}}
          </div>
      </div>
        <el-dialog
          v-model="dialogVisible"
          title="申请该奖项"
          width=50%
        >
          <h3>请上传奖项要求的文件，包括在一个pdf文件中</h3>
          <input id="upload" type="file" accept=".pdf">
          <el-button type="primary" @click="handleUploadFile">点击申请</el-button>
    </el-dialog>
  </div>
  <div class="foot">

  </div>
</div>
</template>

<script>
import {ElMessage} from "element-plus";
import AwardCard from "../common/AwardCard.vue";
import {uploadFile} from "../../api/upload";

export default {
  name: "AwardDetails",
  components: {AwardCard},
  data () {
    return {
      ifAbled:true,
      ifUpload:false,//是否上传文件
      awardId: this.$route.query.id,
      value: '',
      fileUrl:'',
      awardNumber:10,
      dialogVisible:false,
      award: {
        id: "1",
        title: "测试数据1",
        number: '2',
        userId:'',
        deadline: '2001-08-16',
        email: '@163.com',
        phone: '110',
        details: '大家啊咖啡吧爱不完·',
        money:'0',
        standard:"",
        explain: '',
      },
      studentAward: {
          result:'无',
          id:'',
          awardId:'',
          studentId:'',
          status:'',
      },
      awardStatus: [
        {
          content: '未申请',
          color: '#0bbd87',
        },
        {
          content: '已申请',
          color: '#909399'
        },
        {
          content: '未答辩',
          color: '#909399'
        },
        {
          content: '已答辩',
          color: '#909399'
        },
        {
          content: '已出结果',
          color: '#909399'
        },
      ],
    }
  },
  methods: {
    loadMyStudentAward(){
      this.$axios.get("/studentAwards/SelectStudentAwardById" , {params:{awardId:this.awardId,studentId:this.$store.state.user.id}})
          .then(success => {
            if (success.data.code === 200) {
                this.studentAward = success.data.data;
                if(this.studentAward.status==='未申请'){
                  this.ifAbled = true;
                  this.awardStatus[0]={
                    content:'未申请',
                    color: '#0bbd87',
                  };
                }else{
                  this.ifAbled = false;
                  let i =0;
                  for(i=0;i<5;i++) {
                    if(this.studentAward.status=== this.awardStatus[i].content)
                    {
                      this.awardStatus[i]={
                        content: this.studentAward.status,
                        color: '#0bbd87',
                      };
                    }else {
                      this.awardStatus[i].color='#909399'
                    }
                  }
                }
            } else {
              ElMessage({
                message:success.data.message,
                type:'error'
              })
            }
          })
          .catch(fail => {
            console.log(fail);
          })
    },
    handleAward(){
      this.dialogVisible=true
    },
    handleUploadFile() {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      let oInput = document.getElementById('upload');
      let file = oInput.files[0];
      let param = new FormData(); //创建form对象
      param.append('file', file, file.name);
      uploadFile(param).then(response=>{
        this.fileUrl = response.data;
        this.submitUpload();
      })
    },
    submitUpload() {
      this.$axios.post("/file/AddFile",  {fileUrl:this.fileUrl,studentAwardsId: this.studentAward.id})
          .then(success => {
            if (success.data.code === 200) {
              this.dialogVisible=false;
              window.history.go(0);
              this.$notify({
                title: '申请成功',
                message: "已成功申请该奖项",
                type: 'success'
              });
            } else {
              alert(success.data.message)
            }
          }).catch(fail => {
        console.log(fail);
      })
    },

  },
  created() {
    this.awardStatus=[
      {
        content: '未申请',
        color: '#0bbd87',
      },
      {
        content: '已申请',
        color: '#909399'
      },
      {
        content: '未答辩',
        color: '#909399'
      },
      {
        content: '已答辩',
        color: '#909399'
      },
      {
        content: '已出结果',
        color: '#909399'
      }
      ]
  },
  mounted() {
    this.awardId = this.$route.query.id
    this.loadMyStudentAward()
  }
}
</script>
<style scoped>
.main {
  padding-top: 30px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
}
.body {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.body-left {
  margin-right: 150px;
}
.body-center {
  margin-top: 20px;
  width: 150px;
  margin-right: 10px;
}
.text {
 font-weight: bold;
  font-size: 20px;
}
.button {
  margin-bottom: 50px;
  margin-top: 20px;
}
</style>